<!--
 * @Author: Wangtao
 * @Date: 2022-09-01 11:19:10
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-08 19:48:40
-->
<template>
<div class="box">
    <el-table
    ref="singleTableRef"
    :data="tableData"
    style="width: 100%"
    @current-change="handleCurrentChange"
  >
    <el-table-column v-for="(item, index) in tableHeaders" :key="index" :property="item.prop" :label="item.label">
        <template #default="scope" v-if="item.select">
          <div>
              <el-radio label="true"  v-model='scope.row.select'>{{}}</el-radio>{{ scope.row.name || '未设置名称' }}
          </div>
        </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'

import { getCustomerByMobile } from '@app/base/apis/call'


export default defineComponent({
  name: 'customerList',
  components: {},
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    getType: {
      type: String,
      default: ''
    },
    phone: {
      type: String,
      default: ''
    }
  },
  // ----------------生命周期-----------------------
  setup (_: any) {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const state: any = reactive({
      loading: false,
      tableHeaders: [
        {
          label: '客户名称',
          prop: 'name',
          select: true
        },
        {
          label: '手机号码',
          prop: 'phone'
        }
      ],
      tableData: [],
      pagingData: {
        page: 1,
        total: 0,
        limit: 10
      },
      currentRow: null,
      currentRowInfo: null,
      customerList: [],
      handleCurrentChange (row: any, oldRow: any) {
        if (!row.select) {
          row.select = 'true'
          state.currentRow = row
          state.customerList.some((item: any) => {
            if (item._id === row._id) {
              state.currentRowInfo = item
              return true
            }
          })
          if (oldRow) {
            oldRow.select = ''
          }
        }
      },
      async getCustomerListByPhone () {
        const res = await getCustomerByMobile({ mobile: _.phone, type: '1' })
        state.customerList = res.data.list
        state.tableData = res.data.list.map((item: any) => {
           return {
             name: item.customerName,
             phone: _.phone,
             _id: item._id
           }
        }) || []
      }
    })
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
     watch(
      () => _.list,
      (list: any) => {
        state.tableData = list
      },
      { immediate: true }
    )

    watch(
      () => _,
      (props) => {
        if (props && props.getType === 'phone') {
          state.getCustomerListByPhone()
        }
      },
      { immediate: true }
    )
    // ----------------调用方法-----------------------
    return {
      ...toRefs(state)
    }
  }

})
</script>

<style lang="stylus" scoped>
.box
  width 100%
  height: 100%
</style>